<!--
 * @Author: 陈焕杰
 * @Date: 2020-06-29 10:59:25
 * @LastEditTime: 2020-07-06 10:32:31
 * @LastEditors: Please set LastEditors
 * @Description: 订单详情页
 * @FilePath: \mobile_project\src\pages\user\orders\orderDetail.vue
--> 

<template>
  <div class="orderDetail">
    <van-nav-bar title="订单详情" left-text="返回" left-arrow placeholder @click-left="goback" />

    <!-- 订单状态 -->
    <orderState :status = "status"></orderState>

    <!-- 收货人信息 -->
    <receive :order = "order"></receive>

    <!-- 物流信息 -->
    <latestLogistics></latestLogistics>

    <!-- 商品详情 -->
    <shopDetail :order = "order"></shopDetail>

    <!-- 订单价格 -->
    <price :order = "order"></price>

    <!-- 订单记录 -->
    <record :order = "order"></record>
  </div>
</template>

<script>
import * as api from "@/api/apiList/order/order.js"
import orderState from "./components/orderState";
import receive from "./components/receive";
import latestLogistics from "./components/latestLogistics";
import shopDetail from "./components/shopDetail";
import price from "./components/price";
import record from "./components/record";
export default {
  props:["id"],
  components: {
    orderState,
    receive,
    latestLogistics,
    shopDetail,
    price,
    record
  },
  data(){
    return{
      status:"",  //订单状态
      order:{}  //订单信息
    }
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    async API_order_detail(){
      return await api.order_detail(this.id)
    }
  },
  async activated(){
    let res = await this.API_order_detail()
    console.log(res.data.data)
    if(res.data.code === 200) {
      this.status = res.data.data.order.final_status
      this.order = res.data.data.order
    }
  }
};
</script>

<style lang="scss" scoped>
.orderDetail {
  /deep/ .van-nav-bar {
    .van-nav-bar__left {
      .van-icon {
        color: #828282;
      }
      .van-nav-bar__text {
        color: #828282;
      }
    }
  }
}
</style>